<template>
  <view class="indexPage" v-if="demo">
    <div class="banner">
      <swiper class="swiperItem" :autoplay="true" :indicator-dots="true" indicator-active-color="#fff" :circular="true">
        <swiper-item v-for="(item, index) in bList" :key="index">
          <image class="bannerImg" :src="item" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </div>
    <div class="part2">
      <div class="part21">
        <span class="part21a" :class="tabsNum1 === 0 ? 'part21b' : ''" @click="tabsNum1Btn(0)">立减金专区</span>
        <span class="part21a" :class="tabsNum1 === 1 ? 'part21b' : ''" @click="tabsNum1Btn(1)">游戏专区</span>
      </div>
      <div class="part22">
        <div class="part221" v-for="(item, index) in iconList" :key="index" @click="jumpPage(item)">
          <image class="part221-img" :src="item.img"></image>
          <div class="part221-txt">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="part1">
      <div class="part1-title">精品推荐</div>
      <div class="part1-list">
        <div class="part11" v-for="(item, index) in gameList" :key="index" @click="jumpPage(item)">
          <div class="part11A">
            <image class="part11Img" :src="item.img" mode="aspectFill"></image>
            <div class="part11Txt">{{ item.name }}</div>
            <div class="part11Tip" v-if="item.hot">热门</div>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
import { arr1, iconList, iconList1 } from './data1'
import $utils from '../../utils'

export default {
  data() {
    return {
      bList: [require('../../assets/img/banner1.png'), require('../../assets/img/banner2.png'), require('../../assets/img/banner3.png')],
      tabsNum1: 0,
      iconList: iconList,
      gameList: arr1,
      demo: false,
    }
  },
  mounted() {
    let demo = $utils.urlQuery('type')
    if (demo) {
      if (demo === 'turnTable') {
        location.replace('/?type=turnTable#/pages/turnTable1/index')
      }
      if (demo === 'goldEgg') {
        location.replace('/?type=goldEgg#/pages/goldEgg/index')
      }
    } else {
      this.demo = true
    }
  },
  methods: {
    tabsNum1Btn(i) {
      this.tabsNum1 = i
      if (i === 0) {
        this.iconList = iconList
      } else if (i === 1) {
        this.iconList = iconList1
      }
    },
    jumpPage(i) {
      if (i.route) {
        uni.navigateTo({
          url: i.route,
        })
      } else if (i.route1) {
        location.href = 'https://game.jszechao.com' + i.route1
      } else {
        uni.showToast({
          icon: 'error',
          title: '正在开发中',
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.indexPage {
  min-height: 100vh;
  background: #f9f9f9;
}
.banner {
  margin-bottom: 50rpx;
  .swiperItem {
    height: 400rpx;
  }
  .bannerImg {
    width: 100%;
    height: 400rpx;
  }
}
.part2 {
  padding: 0 30rpx;
  .part21 {
    margin-bottom: 30rpx;
    .part21a {
      line-height: 30rpx;
      font-size: 26rpx;
      color: #b5b6b8;
      margin-right: 50rpx;
      position: relative;
    }
    .part21b {
      font-size: 30rpx;
      font-weight: bold;
      color: #212223;
      &:before {
        content: '';
        display: block;
        position: absolute;
        bottom: -14rpx;
        left: 0;
        width: 40rpx;
        height: 4rpx;
        background: #000;
        border-radius: 4rpx;
      }
    }
  }
  .part22 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20rpx;
    .part221 {
      width: 24%;
      text-align: center;
      margin-bottom: 30rpx;
    }
    .part221-img {
      width: 76rpx;
      height: 76rpx;
    }
    .part221-txt {
      font-size: 26rpx;
      line-height: 26rpx;
      margin-top: 14rpx;
    }
  }
}
.part1 {
  padding: 0 30rpx;
  .part1-title {
    font-size: 30rpx;
    line-height: 30rpx;
    font-weight: bold;
    color: #212223;
    margin-bottom: 30rpx;
  }
  .part1-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .part11Img {
    width: 330rpx;
    height: 330rpx;
    border-radius: 18rpx;
    display: block;
  }
  .part11 {
    background: #fff;
    margin-bottom: 30rpx;
    text-align: center;
    border-radius: 16rpx;
    box-shadow: 0px 2rpx 14rpx 0px rgba(236, 239, 243, 0.91);
  }
  .part11A {
    position: relative;
    width: 330rpx;
    overflow: hidden;
  }
  .part11Txt {
    font-size: 26rpx;
    line-height: 26rpx;
    padding: 30rpx 0;
  }
  .part11Tip {
    position: absolute;
    top: 20rpx;
    right: -40rpx;
    background: #f60;
    font-size: 20rpx;
    line-height: 20rpx;
    padding: 8rpx;
    color: #fff;
    text-align: center;
    width: 150rpx;
    transform: rotate(45deg);
    transform-origin: 50% 50%;
  }
}
</style>
